<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 400px;
            height: 400px;
            position: relative;
            float: left;
            margin: 50px 0 0 50px;
        }

        .box1 img {
            width: 100%;
            height: 100%;
        }

        .box1 .dong {
            position: absolute;
            width: 100px;
            height: 100px;
            /* border: ; */
            z-index: 1;
            box-shadow: 0 0 6px 0 #333;
            top: 0;
            left: 0;
            /* border: 1px solid red; */
        }

        .box2 {
            width: 400px;
            height: 400px;
            float: left;
            position: relative;
            overflow: hidden;
            margin: 50px 0 0 100px;
        }

        .img2 {
            position: absolute;
        }

        .te {
            position: absolute;
            z-index: 999;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="box1">
        <img src="../images/fangda.jpg" class="img1" alt="">
        <div class="dong"></div>
        <div class="te"></div>
    </div>

    <div class="box2">
        <img src="../images/fangda.jpg" alt="" class="img2">
    </div>

    <script src="../js/jquery.js"></script>
    <script>
        $(".box1").on("mousemove", function (e) {
            e = e || event;
            let x = e.offsetX - ($(".dong").width()) / 2;
            let y = e.offsetY - ($(".dong").height()) / 2;
            // console.log(x, y);
            let xx = $(".box1").width() - $(".dong").width()
            let yy = $(".box1").height() - $(".dong").height()
            if (x > xx) {
                x = xx
            }
            if (x < 0) {
                x = 0
            }
            if (y < 0) {
                y = 0;
            }
            if (y > yy) {
                y = yy
            }
            $(".dong").css({
                left: x,
                top: y
            })
            let x1 = x / $(".box2").width()
            let y1 = y / $(".box2 img").height()
            // console.log($(".box2 img").height() * (-y1))
            // if ($(".box2 img").height() * (-y1) > $(".box2 img").height()) {
            //     y1 = $(".box2 img").height() * (-y1)
            // }
            let y2 = $(".box2 img").height() * (-y1)
            // if ($(".box2 img").height() * (-y1) < $(".box2 img").height()) {
            console.log(y2)
            // }
            // console.log(y1)
            $(".box2 img").css({
                left: $(".box2 img").width() * (-x1),
                top: $(".box2 img").height() * (-y1)
            })
        })
    </script>
</body>

</html>